<template>
  <footer class="footer" v-if="list.length > 0">
      <!-- 默认情况下，这应该是“剩余 0 项” -->
      <span class="todo-count"><strong>{{leftCount}}</strong> item left</span>
      <!-- 如果您不实施路由，请删除此项 -->
      <ul class="filters">
        <li>
          <a
            href="#/"
            :class="{ selected: type === 'all'}"
            @click.prevent="filter('all')"
          >All</a>
        </li>
        <li>
          <a
            href="#/active"
            :class="{ selected: type === 'active'}"
            @click.prevent="filter('active')"
          >Active</a>
        </li>
        <li>
          <a
            href="#/completed"
            :class="{ selected: type === 'completed'}"
            @click.prevent="filter('completed')"
          >Completed</a>
        </li>
      </ul>
      <!-- 如果没有完成的项目，则隐藏 -->
      <button
        class="clear-completed"
        v-show="isShowClear"
        @click="clear"
      >Clear completed</button>
  </footer>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
    type: {
      type: String,
      default: 'all'
    }
  },
  methods: {
    clear() {
      this.$emit('clear')
    },
    filter(type) {
      this.$emit('filter', type)
    }
  },
  computed: {
    leftCount() {
      return this.list.filter(item => !item.isDone).length
    },
    isShowClear() {
      return this.list.some(item => item.isDone)
    }
  }, 
}
</script>

<style>

</style>